<template>
  <div>
       <!-- 搜素 -->
      <MySearch @parentseachFun="parentseachFun"/>
      <!-- 表格 -->
      <MyTable :arr="arr"  @parentResetFun="getStuData" @parentidshowfun="parentidshowfun" @delfun="getStuData"/>
      <!-- 分页 -->
      <MyPage :total="total" @resetTablefun="getStuData"/>
      <!-- 修改弹框面板 -->
      <!-- 1、用户点击修改按钮，把当前行数据灌入面板，弹出面板，等待用户修改 -->
      <!-- 2、用户修改完成提交按钮，打包数据发送请求，后端修改成功告诉前端，关闭弹窗，刷新表格 -->
      <MyDialog  v-if="isShow" :dialogRow="dialogRow" @resettablefun="getStuData"/>

  </div>
</template>

<script>
import MyPage from './components/MyPage.vue'
import MySearch from './components/MySearch.vue'
import MyTable  from './components/MyTable.vue'
import MyDialog from './components/MyDialog.vue'
// 引入getStuApi请求
import {getStuApi} from '../../api/stuApi'
export default {
  components:{
    MyPage,
    MySearch,
    MyTable,
    MyDialog
  },
  data(){
    return{
      isShow:false,//控制弹框显示与隐藏
      arr:[],//保存表格数组
      page:1,//当前页码
      pageSize:100,//当前页显示多少条
      total:0,//总条数
      searchVal:'',//搜索关键字
      dialogRow:{},//弹框对象
     
    }  
  },
  //1.mounted首屏执行
  mounted(){
    this.getStuData()//发送请求 请求统一管理，都写到api中的stuApi
  },
  methods:{
    parentidshowfun(row){
      //修改第一小步 控制弹框 传参
      this.isShow = true
      this.dialogRow = row
    


    },
    //父组件搜索事件
    parentseachFun(val){
       //把输入框的值，给searchVal
       this.searchVal = val
       //刷新表格
       this.getStuData()
    },

    //2.发请求 拿数据 保存到当前数组中
    //分页 page当前页码 pageSize当前显示多少条
    getStuData(){
      var params = {
        searchVal:this.searchVal,//搜索关键字
        page:this.page,//page:1
        pageSize:this.pageSize//pageSize:100
      }
      //调用getStuApi
      getStuApi(params).then(res=>{
        console.log(res);
        if(res.code == 200){
          this.arr = res.data
          this.total = res.total
        }
      })

    }
  }
  
 
}
</script>

<style>

</style>